<template>
	<view class="content">
		<view class="" style="padding: 40rpx; 25rpx">
			<u-cell-group style="background-color: #fff; " class="boxShadow">
				<u-cell-item title="我的头像" :arrow="false" :borderBottom="true">
					<u-avatar slot="right-icon" size="65" :src="src"></u-avatar>
				</u-cell-item>
				<u-cell-item title="昵称" :arrow="false" value="bluesky" :borderBottom="true">
				</u-cell-item>
				<u-cell-item title="手机" :arrow="true" value="18336465466" :borderBottom="true">
				</u-cell-item>
				<u-cell-item title="真实姓名" :arrow="false" value="王二" :borderBottom="true">
				</u-cell-item>
				<u-cell-item title="身份证号码" :arrow="false" value="4106211999014553" :borderBottom="true">
				</u-cell-item>
				<u-cell-item title="实名认证状态" :arrow="true" @tap="goRealName" value="已认证" :borderBottom="true">
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-modal title="修改手机号" showCancelButton v-model="show" @confirm="confirm" ref="uModal" :async-close="true">
			<view class="slot-content">
				<view class="inputPhone">
					<view class="">
						<view class="aic jcb">
							<u-input v-model="phone" placeholder="输入手机号" />
							<view class="llt-main-color" @tap="getCode">
								{{tips}}
							</view>
						</view>
						<u-line color="#cccccc"></u-line>
					</view>
					<view class="">
						<u-input v-model="value" placeholder="输入短信验证码" />
						<u-line color="#cccccc"></u-line>
					</view>
				</view>

			</view>
		</u-modal>
		<u-verification-code change-text="X秒" :seconds="seconds" @end="end" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		name: "userdetail",
		data() {
			return {
				tips: '获取验证码',
				seconds: 60,
				phone: "",
				show: true,
				src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/44f8d690-4f3d-11eb-b680-7980c8a877b8.svg',
			};
		},
		created() {},
		methods: {
			confirm() {
				setTimeout(() => {
					// 3秒后自动关闭
					this.show = false;
					// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
					// this.$refs.uModal.clearLoading();
				}, 3000)
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			/**
			 * 去实名
			 */
			goRealName(){
				this.$emit('goRealName')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inputPhone {
		width: 80%;
		margin: 0 auto;
		padding: 30rpx;
	}

	.cellitem {
		padding-bottom: 15rpx;
		margin-bottom: 15rpx;
		border-bottom: 1px solid #F0F0F0;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.title {
		color: #6B6B6B;
		font-size: 28rpx;
	}
</style>
